<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.24/index.css" />
    <script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.24/index.js"></script>
    <script>
      window.CHATBOT_CONFIG = {
        endpoint: "https://ai-assistant.tpshion.cn/chat", // 可以替换为 https://{your-fc-http-trigger-domain}/chat
        displayByDefault: true, // 默认不展示 AI 助手聊天框
        aiChatOptions: { // aiChatOptions 中 options 会传递 aiChat 组件，自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat
          conversationOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
            conversationStarters: [
              {prompt: '我能做什么？'},
              {prompt: '你喜欢使用什么编程语言？'},
              {prompt: 'Java方便还是Python方便?'},
            ]
          },
          displayOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
            height: 600,
          },
          personaOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
            assistant: {
              name: '你好，我是你的 AI 助手',
              // AI 助手的图标
              avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',
              tagline: '您可以尝试点击下方的快捷入口开启体验！',
            }
          }
        },
        dataProcessor: {
          /**
           * 在向后端大模型应用发起请求前改写 Prompt。
           * 比如可以用于总结网页场景，在发送前将网页内容包含在内，同时避免在前端显示这些内容。
           * @param {string} prompt - 用户输入的 Prompt
           * @param {string}  - 改写后的 Prompt
           */
          rewritePrompt(prompt) {
            return prompt;
          }
        }
      };
    </script>
    <style>
      :root {
        /* webchat 工具栏的颜色 */
        --webchat-toolbar-background-color: #1464E4;
        /* webchat 工具栏文字和按钮的颜色 */
        --webchat-toolbar-text-color: #FFF;
      }
      /* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
      .webchat-container {
        z-index: 100;
        bottom: 10px;
        right: 10px;
      }
      /* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
      .webchat-bubble-tip {
        z-index: 99;
        bottom: 20px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
